<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去元素默认外边距【通配选择器】设置背景颜色
			        2.product_card 设置样式 内边距  边框设置颜色  加倒角
					加阴影 所有内容 --居中 ： text-align:center
					3.图片边框倒角   外边距
					4.小米su7  文字：外边距
					5.价格  文字大小 颜色
					6.颜色  位置
			 */
			#product_card{
				border: 1px solid transparent;
				width: 350px;
				height: 555px;
				background: white;
				border-radius: 2%;
				box-shadow: 5px 5px 20px gray ;
				text-align: center;
			}
			img{
				border: 1px solid transparent;
				padding: 20px 45px ;
				border-radius: 14%;
			}
			h3{
				margin-left:0px;
				
			}
			#p1{
			
				font-size: 20px;
				color: red;
			}
			#p2{
				
				font-size: 15px;
				color: gray;
			}
		</style>
		
	</head>
	<body>
		<div id="product_card">
			<img src="img/小米su.jpg" alt="su7" width="260px" height="358px">
			<h3>小米su7</h3>
			<p id="p1">￥279999.00</p>
			<p id="p2">已有<span>10万＋</span>人评价</p>
		</div>
		
	</body>
</html>